<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Test</title>

	<style>

	* {
		margin: 0px;
		padding: 0px;		
	}
	body {
		background:#DDD;
		font-family: verdana, arial, sans-serif;
		font-size:14px;
	}
	#container {
	  float:left;
		margin-top:100px;
		font-family: Tahoma, Arial, sans-serif;
  	font-size: 10px;
	}
	</style>

	<script type="text/javascript" src="../javascripts/prototype.js"> </script> 
	<script type="text/javascript" src="../javascripts/effects.js"> </script>
	<script type="text/javascript" src="../javascripts/window.js"> </script>
	<script type="text/javascript" src="../javascripts/debug.js"> </script>
	<link href="../themes/default.css" rel="stylesheet" type="text/css" >	 </link>
	<link href="../themes/theme1.css" rel="stylesheet" type="text/css" >	 </link>
	<link href="../themes/mac_os_x.css" rel="stylesheet" type="text/css" >	 </link>
	<link href="../themes/alphacube.css" rel="stylesheet" type="text/css" >	 </link>
	<link href="../themes/darkX.css" rel="stylesheet" type="text/css" >	 </link>
	<link href="../themes/spread.css" rel="stylesheet" type="text/css" >	 </link>
	<link href="../themes/alert.css" rel="stylesheet" type="text/css" >	 </link>
	<link href="../themes/alert_lite.css" rel="stylesheet" type="text/css" >	 </link>
	<title>Sample Windows</title>
</head>
<body>
  <div class="dialog_n" id="tmp" style="display:none">toto</div>
	The window with rubyonrails.org in it has a delegate to prevent closing. That's why you cannot close it. Check out the code to see how to do it.<br>
	Open a <a href="javascript:openConfirmDialog()">confirm dialog</a>, 
	an <a href="javascript:openAlertDialog()">alert dialog</a>
  or an <a href="javascript:openInfoDialog()">info dialog</a> (with alert_lite.css)
  <br/>
	<a href="javascript:openModalDialog()">Click here to open a modal window</a>
	<br/>
	<div id="select">
	Test select for IE <SELECT NAME="partnumber">
		<OPTION VALUE="1"> One
		<OPTION VALUE="2"> Two
		<OPTION VALUE="3"> Three
		<OPTION VALUE="5"> Five
		<OPTION VALUE="4"> Oooopppppppps I forgot four
	</SELECT>
	<br/>
	</div>
	<a href="javascript:openContentWindow()">Click here to open a window with the div below at the exact same size and position</a>
	<br/>
	<a href="javascript:Windows.closeAll()">Close all windows</a> (if it's possible)  
	
	<div style="clear:both"></div>
	<div id="container">
  	 <div style="float:left; width:150px"> &nbsp;</div> <!-- margin -->
	   <div id="test_content" style="float:left;width:100px; height:150px;background:#DFA; color:#000; font-size:12px;">
		   Lorem ipsum dolor sit amet, consectetur adipiscing elit
	  </div>
	</div>
<script>
	var index= 0;
	var contentWin = null;
	
	// Debug window
	showDebug();

	// Window with scrollable text
	win = new Window('dialog1', {className: "alphacube",  width:300, height:400, zIndex: 100, resizable: true, title: "Not draggable!!", showEffect:Element.show, hideEffect: Effect.SwitchOff, draggable:false})
	win.getContent().innerHTML= "<div style='padding:10px'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incom dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. \
	At vver eos et accusam dignissum qui blandit est praesent. Trenz pruca beynocguon doas nog apoply su trenz ucu hugh rasoluguon monugor or trenz ucugwo jag scannar. Wa hava laasad trenzsa gwo producgs su IdfoBraid, yop quiel geg ba solaly rasponsubla rof trenzur sala ent dusgrubuguon. Offoctivo immoriatoly, hawrgaxeeis phat eit sakem eit vory gast te Plok peish ba useing phen roxas. Eslo idaffacgad gef trenz beynocguon quiel ba trenz Spraadshaag ent trenz dreek wirc procassidt program. Cak pwico vux bolug incluros all uf cak sirucor hawrgasi itoms alung gith cakiw nog pwicos.\
	Lor sum amet, commy nulputat. Duipit lum ipisl eros dolortionsed tin hent aliquis illam volor in ea feum in ut adipsustrud elent ulluptat. Duisl ullan ex et am vulputem augiam doloreet amet enibh eui te dipit acillutat acilis amet, suscil er iuscilla con utat, quisis eu feugait ad dolore commy nullam iuscilisl iureril ilisl del ut pratuer iliquis acipissit accum quis nulluptat. Dui bla faccumsan velis auguero con henis duismolor sumsandrem quat vulluptat alit er iniamcore exeriure vero core te dit ut nulla feummolore commod dipis augiamcommod tem ese dolestrud do odo odiamco eetummy nis aliquamcommy nonse eu feugue del eugiamconsed ming estrud magnis exero eumsandio enisim del dio od tat.sumsan et pratum velit ing etue te consequis alis nullan et, quis am iusci bla feummy.</div>"
	win.showCenter();
	
	// Windows with an URL as content
	win2 = new Window('dialog2', {title: "Ruby on Rails", 
								  bottom:70, left:0, width:300, height:200, 
								  resizable: true, url: "http://www.rubyonrails.com/", showEffectOptions: {duration:3}})
	win2.show();

	win3 = new Window('dialog3', {className: "spread", title: "Not Closable", 
								  top:10, right:20, width:300, height:200, 
								  closable: false, url: "http://www.google.com/", showEffectOptions: {duration:3}})
	win3.show();

	function openConfirmDialog() {
		Dialog.confirm("Test of confirm panel, check out debug window after closing it<br>Test select for IE <SELECT NAME='partnumber'><OPTION VALUE='1'> One<OPTION VALUE='2'> Two<OPTION VALUE='3'> Three<OPTION VALUE='5'> Five<OPTION VALUE='4'> Oooopppppppps I forgot four</SELECT>", 
				        {windowParameters: {width:300, height:100}, okLabel: "close", 
						    cancel:function(win) {debug("cancel confirm panel")},
						    ok:function(win) {debug("validate confirm panel"); return true}
						    });
	}
	
	function openAlertDialog() {
		Dialog.alert("Test of alert panel, check out debug window after closing it", 
				        {windowParameters: {width:300, height:100}, okLabel: "close", 
						    ok:function(win) {debug("validate alert panel"); return true}
						    });
	}

  var timeout;
	function openInfoDialog() {
		Dialog.info("Test of info panel, it will close <br>in 3s ...",
				        {windowParameters: {className: "alert_lite",width:250, height:100}, showProgress: true});
		timeout=3;
		setTimeout("infoTimeout()", 1000)
	}
	
	function infoTimeout() {
	  timeout--;
	  if (timeout >0) {
	    Dialog.setInfoMessage("Test of info panel, it will close <br>in " + timeout + "s ...")
  		setTimeout("infoTimeout()", 1000)
    }
	  else
	    Dialog.closeInfo()
	}
	
	function openModalDialog() {
	  debug($('modal_window_content'))
		var win = new Window('modal_window', {className: "dialog", title: "Ruby on Rails",top:100, left:100,  width:300, height:200, zIndex:150, opacity:1, resizable: true})
		//win.getContent().innerHTML = "Hi"
		win.setContent("select")
		win.setDestroyOnClose();
		win.show(true);	
	}
		
	function openContentWindow() {
		if (contentWin != null) {
			Dialog.alert("Close the window 'Test' before opening it again!", {windowParameters:{ width:200, height:130}}); 
		}
		else {
			contentWin = new Window('content_win', {className: "darkX", resizable: false, hideEffect:Element.hide, showEffect:Element.show})
			contentWin.setContent('test_content', true, true)
			contentWin.toFront();
			contentWin.setDestroyOnClose();
			contentWin.show();	
		}		
	}
		
	// Sample code to see how to implement a delegate
	var myDelegate = {
		canClose: function(win) {
			debug("You cannot close " + win.getId());
			// return false, the window cannot be closed
			return false;
		}		
	}

	// Set up a deleagte for win2 (the one with rubyonrails.org in it)
	win2.setDelegate(myDelegate);
	win2.setCookie("test");
	
	// Set up a windows observer, check ou debug window to get messages
	var myObserver = {
		onStartMove: function(eventName, win) {
			debug(eventName + " on " + win.getId())
		},
		onEndMove: function(eventName, win) {
			debug(eventName + " on " + win.getId())
		},
		onStartResize: function(eventName, win) {
			debug(eventName + " on " + win.getId())
		},
		onEndResize: function(eventName, win) {
			debug(eventName + " on " + win.getId())
		},
		onClose: function(eventName, win) {
			debug(eventName + " on " + win.getId())
		},
		onDestroy: function(eventName, win) {
			if (win == contentWin) {
				$('container').appendChild($('test_content'));
				contentWin = null;
			}
			
			debug(eventName + " on " + win.getId())
		}
	}
	Windows.addObserver(myObserver);
</script>
</body>
</html>
